<template>
	<div v-if="flag">
		<div class="search">
			<el-input v-model="wareName" placeholder="请输入商品名称" @keyup.native.enter="searchinfo"></el-input>
			<div>
				<el-date-picker
					v-model="starttime"
					type="date"
					placeholder="请选择开始日期"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					style="width:150px;"
				/>
			</div>
			<span class="heng">—</span>
			<div>
				<el-date-picker
					v-model="endtime"
					type="date"
					placeholder="请选择结束日期"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					style="width:150px;"
				/>
			</div>
			<el-button @click="searchinfo" class="searchBtn" type="info" :icon="Search" >搜索</el-button>
		</div>
		<div class="chart">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="userName" label="意见人"  />
				<el-table-column prop="wareName" label="商品名称"  />
				<el-table-column prop="ordersId" label="订单号" />
				<el-table-column prop=""  label="反馈内容">
					<template #default="scope">
						<span class="feeds" @click="flagchange(scope.row.commentId)">{{scope.row.commentContent}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="commentTime" label="反馈时间" />
			</el-table>
			<el-pagination
			layout="prev,pager,next"
			:page-count="total"
			:page-size="pageSize"
			v-model:current-page="pageIndex"	
			@current-change="changePage"
			></el-pagination>
		</div>
	</div>
	<feeddetail v-else @goback="gofeed" :detailsId="detailsId"></feeddetail>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import {feedbacksinfo,searchcommentsinfo} from "../api/zhy"
	import { Search,CirclePlus} from '@element-plus/icons-vue';
	import feeddetail from "../components/feeddetail.vue"
	let total=ref(0)
	let pageSize=ref(5)
	let pageIndex=ref(1)
	let tableData=ref()
	let wareName=ref()
	let starttime=ref()
	let endtime=ref()
	let detailsId=ref()
	//跳转到详情
	let flag=ref(true)
	const flagchange=(id)=>{
		flag.value=false
		// console.log(id,"id")
		detailsId.value=id
	}
	const gofeed=(bool)=>{
		flag.value=bool
	}
	//时间处理
	const times=()=>{
		tableData.value.forEach(v => {
			let str = v.commentTime + ""
			v.commentTime = str.substring(0, 10)
		})
	}
	const initfeedinfo=async()=>{
		let res=await feedbacksinfo({
			pageIndex:pageIndex.value,
			pageSize:pageSize.value,
		})
		console.log(res,"意见")
		tableData.value=res[""]
		console.log(res.total,"res.total")
		total.value=Math.ceil(Number(res.total)/pageSize.value)  
		times()
	}
	initfeedinfo()
	//搜索信息
	const searchinfo=async()=>{
		let res=await searchcommentsinfo({
			wareName:wareName.value,
			beginTime:starttime.value,
			endTime:endtime.value,
			pageIndex:pageIndex.value,
			pageSize:pageSize.value,
		})
		tableData.value=res.comments
		total.value=Math.ceil(Number(res.total)/pageSize.value)  
		times()
		console.log(res,"搜索")
	}
	const changePage=(page)=>{
		pageIndex.value=page
		initfeedinfo()
	}
</script>

<style scoped lang="less">
	.search{
		width:100%;
		// height:40px;
		// margin-top: 10px;
		display: flex;
		align-items: center;
	}
	.el-input{
	    width: 150px;
		// height: 40px;
	    margin-right:30px;
	    border: none;
	 }
	.searchBtn{
	background-color: #106ab1;
	border: none;
	// height: 40px;
	margin-left: 30px;
	}
	:deep(.el-table tr){
		height:80px;
	}
	:deep(.el-table .el-table__cell){
		text-align: center !important;
	}
	.heng {
		display: inline-block;
		height: 65px;
		line-height: 60px;
		font-size: 20px;
		margin: 0 30px;
	}
	.feeds{
		text-decoration: underline;
	}
	.feeds:hover{
		cursor: pointer;
	}
	// 分页样式
	.el-pagination{
		--el-pagination-bg-color:none;
		--el-pagination-button-disabled-bg-color:none;
		justify-content: center;
	}
</style>